// subPackages/packageA/shesu/components/caseTypes/caseTypes.ts
import * as echarts from '../ec-canvas/echarts';
import { getSxStatAyListAPI } from "../../../api/shesu"
let caseData = []
function setOption(chart) {
  let option = {
    grid: {
      left: 10
    },
    legend: {
      orient: "vertical",
      right: "10",
      top: "middle",
      itemGap: 12,
      formatter: function (name) {
        var data = option.series[0].data
        var total = data.reduce((a, b) => {
          let num = b.value
          if (num || num == 0) {
            num = Number(b.value)
          }
          return a + num
        }, 0)
        var target = data.find((item) => item.name === name)
        var percentage = ((target.value / total) * 100).toFixed(2).replace(/\.00$/, "") + "%"
        return `{a| ${name}}` + " " + "{a|" + target.value + "}" + "\n" + "{b|" + percentage + "}"
      },
      textStyle: {
        rich: {
          a: {
            fontSize: 14,
            color: "#1D2129",
            align: "right"
          },
          b: {
            fontSize: 14,
            color: "#1D2129",
            align: "left"
          }
        }
      }
    },
    tooltip: {
      show: false,
      trigger: "item",
      backgroundColor: "rgba(0,0,0,0.7)",
      borderWidth: 0,
      textStyle: {
        color: "#fff",
        fontWeight: "normal"
      }
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: ["40%", "70%"],
        center: ["30%", "50%"],
        // roseType: "area",
        // itemStyle: {
        //   borderRadius: 4
        // },
        label: {
          show: false
        },
        data: caseData
        // data: [
        //   { value: 40, name: '民事案件' },
        //   { value: 38, name: '执行案件' },
        //   { value: 32, name: '行政案件' },
        //   { value: 30, name: '保全案件' }
        // ]
      }
    ]
  }
  chart.setOption(option);

}



Component({
  options: {
    styleIsolation: "apply-shared"
  },
  /**
   * 组件的属性列表
   */
  properties: {
    debtorId: {
      type: String,
      value: ""
    },
    businessType: {
      type: String,
      value: "1"
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    isLoaded: false,
    ec: {
      lazyLoad: true
    },
    emptyFlag: false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    init() {
      this.ecComponent.init((canvas, width, height, dpr) => {
        // 获取组件的 canvas、width、height 后的回调函数
        // 在这里初始化图表
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        setOption(chart);

        // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
        this.chart = chart;

        this.setData({
          isLoaded: true
        });
        return chart;
      });
    },
    getDatas() {
      getSxStatAyListAPI({ id: this.data.debtorId, businessType: this.data.businessType }).then((res) => {
        caseData = res.content || []
        if (caseData.length == 0) {
          this.setData({
            emptyFlag: true
          })
          return
        }
        this.init()
      })
    }
  },
  lifetimes: {
    attached: function () {
      this.ecComponent = this.selectComponent('#mychart-dom-case-type')
    }
  },
  observers: {
    'debtorId': function () {
      if (this.data.debtorId) {
        this.getDatas()
      }
    }
  },
})